<template>
  <div class="app-container detail">
    <!-- <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="任务基本信息" name="1"> <BasicInfo></BasicInfo> </el-tab-pane>
      <el-tab-pane label="客户信息" name="4"> <Customer></Customer> </el-tab-pane>
      <el-tab-pane label="检查内容" name="2"> <Content></Content> </el-tab-pane>
      <el-tab-pane label="影像资料采集" name="3"> <Viewdata></Viewdata> </el-tab-pane>
    </el-tabs> -->
    <div>
      <el-row class="bgc">
        <el-col :span="24">任务基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
        <el-form-item label="任务编号">
          <el-input v-model="loanInfo.taskId" disabled />
        </el-form-item>
        <el-form-item label="借据编号">
          <el-input v-model="loanInfo.loanId" disabled />
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="loanInfo.contractId" disabled />
        </el-form-item>
        <el-form-item label="客户号">
          <el-input v-model="loanInfo.customerId" disabled />
        </el-form-item>
        <el-form-item label="检查类型">
          <el-input v-model="loanInfo.checkType" disabled />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="loanInfo.customerName" disabled />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-input v-model="loanInfo.customerType" disabled />
        </el-form-item>
        <el-form-item label="放款日期">
          <el-input v-model="loanInfo.loanDate" disabled />
        </el-form-item>
        <el-form-item label="担保到期日">
          <el-input v-model="loanInfo.loanMaturityDate" disabled />
        </el-form-item>
        <el-form-item label="业务种类">
          <el-input v-model="loanInfo.businessVariety" disabled />
        </el-form-item>
        <el-form-item label="担保方式">
          <el-input v-model="loanInfo.guarantyStyle" disabled />
        </el-form-item>
        <el-form-item label="还款方式">
          <el-input v-model="loanInfo.repaymentMethod" disabled />
        </el-form-item>
        <el-form-item label="任务生成日期">
          <el-input v-model="loanInfo.taskCreateDate" disabled />
        </el-form-item>
        <el-form-item label="要求完成日期">
          <el-input v-model="loanInfo.taskDueDate" disabled />
        </el-form-item>
        <el-form-item label="实际完成日期">
          <el-input v-model="loanInfo.actualDueDate" disabled />
        </el-form-item>
        <el-form-item label="主管客户经理">
          <el-input v-model="loanInfo.manager" disabled />
        </el-form-item>
        <el-form-item label="任务执行机构">
          <el-input v-model="loanInfo.executionAgency" disabled />
        </el-form-item>
        <el-form-item label="任务执行人">
          <el-input v-model="loanInfo.executor" disabled />
        </el-form-item>
        <el-form-item label="所在机构">
          <el-input v-model="loanInfo.employerAgency" disabled />
        </el-form-item>
      </el-form>
    </div>

    <!-- <div>
      <el-row class="bgc">
        <el-col :span="24">客户信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="formLabelAlign" :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.openBank" disabled />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="formLabelAlign.openAddr" disabled />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.cardNo" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话1">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话2">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="现居住地址">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="工作单位备注">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="配偶姓名">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
      </el-form>
    </div> -->

    <div>
      <el-row class="bgc">
        <el-col :span="24">检查结论</el-col>
      </el-row>
      <el-form :label-position="labelPosition" :model="contentInfo" label-width="200px">
        <el-form-item label="是否检查异常">
          <el-switch v-model="contentInfo.checkExceptionStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="建议采取具体的描述及说明">
          <el-input v-model="contentInfo.suggestionDescription" disabled type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">影像资料</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(现场检查影像信息)</div>
            <div class="box_flex">
              <div v-for="(item, index) in customerLoanData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(楼盘合作协议)</div>
            <div class="box_flex">
              <div v-for="(item, index) in fieldInspectionImageData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(商品房预售许可证)</div>
            <div class="box_flex">
              <div v-for="(item, index) in guarantorData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
          <div class="flexImg">
            <div style="margin-bottom: 5px">其他资料</div>
            <div class="box_flex">
              <div v-for="(item, index) in otherData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div></div>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import router from "@/router";
import { getInfo, getBasic, getInfoImage, getConInfo } from "@/api/guarantee";
const url = ref("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");
const route = useRoute();
const labelPosition = ref("right");
const code = ref("");
const state = reactive({
  loanInfo: {}, //担保信息
  tableList: [],
  contentInfo: {},
  otherData: [],
  customerLoanData: [],
  fieldInspectionImageData: [],
  guarantorData: [],
  formLabelAlign: {
    branchName: "", //支行名称
  },
  lists: [], //展示菜单项
});
const { formLabelAlign, loanInfo, contentInfo, otherData, customerLoanData, fieldInspectionImageData, guarantorData } = toRefs(state);
const activeName = ref("1");

function getPromise() {
  Promise.all([getBasic(route.query.taskId), getConInfo(route.query.taskId), getInfoImage(route.query.taskId)]).then((res) => {
    console.log(res, "8888");
    if (res[0].data != null) {
      loanInfo.value = res[0].data;
    }
    if (res[1].data != null) {
      contentInfo.value = res[1].data;
    }

    if (res[2].data != null) {
      otherData.value = res[2].data.otherData.split(",");
      customerLoanData.value = res[2].data.customerLoanData.split(",");
      fieldInspectionImageData.value = res[2].data.fieldInspectionImageData.split(",");
      guarantorData.value = res[2].data.guarantorData.split(",");
    }
  });
}

getPromise();
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}
</style>
